<template>
    <div class="row">
        <!--头部 图片-->
        <div class="headimg">
            <img :src="img">
            <div class="head_title">
                <div class="head_title_box">
                    <p class="head_text_top">{{head_title_box}}</p>
                    <span class="head_text">{{head_textl}}</span><span class="head_text">{{head_textr}}</span>
                </div>
            </div>
        </div>
        <!--头部 图片end-->
        <div class="officer-center">
            <ul>
                <!--账户信息-->
                <li class="officer-li" @click="officer(0)" v-if="news.length>0">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/u3510.png" class="officer-g">
                            <span class="officer-t">会议新闻</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[0].show}"></i></div>
                        </div>
                    </div>
                </li>

                <li class="officer_lit" v-if="news.length>0">
                    <transition name="fade">
                    <div class="officer_show"  v-show="showl.data[0].show">
                        <div class="offone" v-for="item in news" @click="newslink(item.id)">
                            <!--<router-link :to="{ name: 'news', params: { id:item.id }}">-->
                            <p class="offonep">{{item.createtime}}</p>
                            <p>{{item.title}}</p>
                            <!--</router-link>-->
                        </div>
                    </div>
                    </transition>
                    <i v-if="showl.data[0].show===false"></i>
                </li>

                <!--会议简介-->
                <li class="officer-li" @click="officer(1)" v-if="meeting_details!=''">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/id_cord.png" class="officer-g">
                            <span class="officer-t">会议简介</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[1].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit" v-if="meeting_details!=''">
                    <div class="officer_show" v-if="showl.data[1].show">
                        <div class="offtwo" v-html="meeting_details">
                        </div>
                    </div>
                    <i></i>
                </li>
                <!--注册费与参与费-->
                <li class="officer-li" @click="officer(2)">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/feiyong.png" class="officer-g">
                            <span class="officer-t">注册费与参与费</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[2].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit">
                    <div class="officer_show" v-if="showl.data[2].show">
                        <div  class="offthree">
                            <table class="offthree_tab">
                                <thead>
                                <tr>
                                    <th>费用名称</th>
                                    <th>费用</th>
                                    <th>单位</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="item in regfee"><td><span v-if="item.ticket_type==3">作者票</span><span v-if="item.ticket_type==4">听众票</span></td><td>{{item.ticket_price}}</td><td>{{item.currency_type}}</td></tr>
                                </tbody>
                            </table>
                            <p>费用说明：</p>
                            <div v-html="reg_description"></div>
                            <!--<p>1、如有已录用稿件，请选择缴纳注册费。</p>-->
                            <!--<p>2、如有价格调整，请联系工作人员调整价格。</p>-->
                            <!--<p>3、注册费仅限已对该会议进行投稿并录用用户开放。其他参会用户，请选择参会费。</p>-->
                        </div>
                    </div>
                    <i></i>
                </li>
                <!--会议组织-->
                <li class="officer-li" @click="officer(3)" v-if="committee.length>0">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/dengpao-tianchong.png" class="officer-g">
                            <span class="officer-t">会议组委会</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[3].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit" v-if="committee.length>0">
                    <div class="officer_show" v-if="showl.data[3].show">
                        <div class="offfour" v-for="item in committee" @click="committeet(item.id)">
                            <div class="offfour_left">
                                <img :src="item.avatar">
                            </div>
                            <div class="offfour_right">
                                <p>{{item.name}}</p>
                                <p>{{item.unit}}</p>
                                <p>{{item.title}}</p>
                            </div>
                        </div>
                    </div>
                    <i v-if="showl.data[3].show===false"></i>
                </li>
                <!--会议征稿-->
                <li class="officer-li" @click="officer(4)" v-if="config!=''">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/wenjian.png" class="officer-g">
                            <span class="officer-t">会议征稿</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[4].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit bgf5" v-if="config!=''">
                    <div class="officer_show" v-if="showl.data[4].show">
                        <div class="offfive" v-html="config">
                        </div>
                    </div>
                    <i></i>
                </li>
                <!--论文评审及出版-->
                <li class="officer-li" @click="officer(5)" v-if="publication!=''">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/major.png" class="officer-g">
                            <span class="officer-t">论文评审及出版</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[5].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit bgf5" v-if="publication!=''">
                    <div class="officer_show" v-if="showl.data[5].show">
                        <div class="offsix" v-html="publication">

                        </div>
                    </div>
                    <i></i>
                </li>
                <!--会议日程-->
                <li class="officer-li" @click="officer(6)" v-if="agenda!=''">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/richeng.png" class="officer-g">
                            <span class="officer-t">会议日程</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[6].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit" v-if="agenda!=''">
                    <div class="officer_show" v-if="showl.data[6].show" v-html="agenda">
                        <!--<div class="offseven">-->
                        <!--<ul class="time-vertical">-->
                        <!--<li><b class="tb tbb"></b><a class="tit tit1">10月28日</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>06：00-11:00</span>注册签到</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>12：00-15:00</span>注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>15：00-17:00</span>注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到注册签到</a></li>-->
                        <!--</ul>-->
                        <!--<ul class="time-vertical">-->
                        <!--<li><b class="tb tbb"></b><a class="tit tit1">12月30日</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>06：00-11:00</span>主题报告</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>12：00-15:00</span>本次会议围绕智能计算、能源材料与人文教育等多个领域展开多视角、跨学科的交流和探讨，分别分为了2个会场，理科会场为智能计算与与计算机信息科学、水利水电与能源材料等领域的学术探讨；文科会场则以经济商务管理与国际现代教育等领域为此次会场交流主题。</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>15：00-17:00</span>本次会议围绕智能计算</a></li>-->
                        <!--</ul>-->
                        <!--<ul class="time-vertical">-->
                        <!--<li><b class="tb tbb"></b><a class="tit tit1">12月31日</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>06：00-11:00</span>口头报告</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>12：00-15:00</span>本着学术交流多元化的原则，来自上海交通大学、深圳大学、国防科技大学、Fujian Agriculture and Forestry University, Vietnam等多所国内外高等院校的学者们也为我们了呈现了精彩的口头的报告</a></li>-->
                        <!--<li><b class="tb"></b><a class="tit"><span>15：00-17:00</span>Forestry University, Vietnam</a></li>-->
                        <!--</ul>-->
                        <!--</div>-->
                    </div>
                    <i></i>
                </li>
                <!--会议地点-->
                <li class="officer-li" @click="officer(7)" v-if="location!=''">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/didian.png" class="officer-g">
                            <span class="officer-t">会议地点</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[7].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit bgf5" v-if="location!=''">
                    <div class="officer_show" v-if="showl.data[7].show">
                        <div class="offeight" v-html="location">
                        </div>
                    </div>
                    <i></i>
                </li>
                <!--联系我们-->
                <li class="officer-li" @click="officer(8)" v-if="contacts.length>0">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/lianxiwomen.png" class="officer-g">
                            <span class="officer-t">联系我们</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[8].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit bgf5" v-if="contacts.length>0">
                    <div class="officer_show" v-if="showl.data[8].show">
                        <div class="offnine" v-for="item in contacts">
                            <p>联系人：{{item.name}}</p>
                            <p>手机号码：{{item.phone}}</p>
                            <p>邮箱：{{item.email}}</p>
                            <p>固定电话：{{item.mobile}}</p>
                            <a class="offninea" v-if="item.qq_code"><img :src="item.qq_code"><span>会议QQ群</span></a>
                            <a class="offninea ml20" v-if="item.wechat_code"><img :src="item.wechat_code"><span>会议微信群</span></a>
                        </div>
                    </div>
                    <i></i>
                </li>
                <!--合作单位及支持单位-->
                <li class="officer-li" @click="officer(9)" v-if="offtenimg.length>0">
                    <div class="w12 dan">
                        <div class="w6">
                            <img src="../../common/image/job.png" class="officer-g">
                            <span class="officer-t">合作单位及支持单位</span>
                        </div>
                        <div class="w6">
                            <div class="fr"><i class="officer-r1" :class="{'officer-r2': showl.data[9].show}"></i></div>
                        </div>
                    </div>
                </li>
                <li class="officer_lit" v-if="offtenimg.length>0">
                    <div class="officer_show" v-if="showl.data[9].show">
                        <div class="offten">
                            <ul>
                                <li v-for="item in offtenimg"><img :src="item.logo_image"></li>
                            </ul>
                        </div>
                    </div>
                    <i></i>
                </li>
            </ul>
        </div>
      <div class="sidebar">
        <ul>
          <li class="sidebar_a" :class="{sidebar_aon:sidebar_on==1}" @click="userfocus()"></li>
          <li class="sidebar_b"><p class="sidebar_t"><i></i></p><p>投稿</p></li>
          <li class="sidebar_c" @click="getReg()"><p class="sidebar_p">注册</p><p>缴费</p></li>
        </ul>
      </div>

      <!--<van-dialog v-model="show" show-cancel-button :before-close="beforeClose" title="登录">-->
        <!--<van-field v-model="account" type="text"  placeholder="请输入账号" />-->
        <!--<van-field v-model="password" type="password"  placeholder="请输入密码" />-->
        <!--<p class="tishi" v-show="active">账号或密码错误</p>-->
      <!--</van-dialog>-->
    </div>
</template>
<script>
    import Sidebar from "components/sidebar/sidebar"
    import {Toast,Indicator} from 'mint-ui';
    import {RequestPost} from '@/api/http.js'
    //import { officerapi } from 'api/officer'
    import axios from 'axios'
    export default {
        name: "officer",
        components:{
            // Sidebar
        },
        data() {
            return {
                data:{
                    id:null,
                },
                id:43,
                img:null,
                head_title_box:'',
                head_textl:'',
                head_textr:'',
                offfour_left:require('../../common/image/officer/u2757.png'),
                offtenimg:[],
                news:[],
                committee:[],// 组委会数组
                config:'',//会议征稿详情
                publication:'',//论文评审及出版
                agenda:'',//会议日程
                location:'',//会议地点
                contacts:[],//联系人
                show: false,
                showl:{
                    data: [
                        {index: 0, show: false},
                        {index: 1, show: false},
                        {index: 2, show: false},
                        {index: 3, show: false},
                        {index: 4, show: false},
                        {index: 5, show: false},
                        {index: 6, show: false},
                        {index: 7, show: false},
                        {index: 8, show: false},
                        {index: 9, show: false},
                    ]
                },
                userName: '', //用户信息
                userEmail: '',//用户邮箱
                userAvatar: '',//用户头像
                userTag: '',//用户标签
                userId: '',//用户ID
                active:false,
                logins:false,
                password: '',
                account:'',
                is_login: false,
                sidebar_on:0, //收藏状态
                 meeting_details:'',//会议简介
            }
        },
        beforeCreate(){
            // console.log('beforeCreate:刚刚new Vue()之后，这个时候，数据还没有挂载呢，只是一个空壳')
            // console.log(this.msg)//undefined
            // console.log(document.getElementsByClassName("myp")[0])//undefined
        },
        created(){
            this.data.id =  this.$route.query.id
            document.title = this.$route.query.title
            this.$fetch('https://www.aischolar.com/mobile/meeting/detail',
                {id:this.data.id}
            ).then((response) => {
                    console.log(response)
                    this.news =response.data.news
                    this.img =response.data.meeting.cover_image
                    this.head_title_box =response.data.meeting.title
                    this.head_textl =response.data.meeting.start_time
                    this.head_textr =response.data.meeting.city
                    this.meeting_details =response.data.meeting.meeting_details
                    this.committee= response.data.committee
                    this.config=response.data.config.draft_text
                    this.publication=response.data.config.publication
                    this.agenda=response.data.meeting.agenda
                    this.location=response.data.meeting.location
                    this.contacts =response.data.contacts
                    this.offtenimg=response.data.co
                    this.reg_description=response.data.meeting.reg_description
                    this.regfee=response.data.regfee
                }).catch(err => {
                Toast({
                    message: '获取数据失败',
                    duration: 3000
                });
            })
            this.userfocu()

            // console.log('created:这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数')
            // this.msg+='!!!'
            // console.log('在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log('接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染')
        },
        beforeMount(){
            // console.log('beforeMount：虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated')
            // this.msg+='@@@@'
            // console.log('在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取')
            // console.log(document.getElementsByClassName("myp")[0])//undefined
            // console.log('接下来开始render，渲染出真实dom')
        },
        // render:function(createElement){
        //     console.log('render')
        //     return createElement('div','hahaha')
        // },
        mounted(){
            // console.log('mounted：此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了')
            // console.log(document.getElementsByClassName("myp")[0])
            // console.log('可以在这里操作真实dom等事情...')
            //  let officer_li = document.getElementsByClassName('officer-li');
            // officer_li.onclick(function() {
            //   for (let i = 0; i<officer_li.length; i++) {
            //    console.log(11)
            //   }
            // })

            //    this.$options.timer = setInterval(function () {
            //        console.log('setInterval')
            //         this.msg+='!'
            //    }.bind(this),500)
        },
        methods: {
            officer:function(num){
                // if (event) {
                //   console.log('点击',event)
                // }
                // let showvalue = event.target.value;
                console.log(num);
                this.showl.data[num].show=!this.showl.data[num].show;
                console.log(this.showl);
                console.log(this.showl.data.length);
            },
          beforeClose(action, done) {
            if (action === 'confirm') {
              if(this.password == '' || this.account == ''){
                this.active = true;
                done(false);
              }else {
                this.active = false;
                RequestPost({url:'/user/index',data:{username:this.account,password:this.password}}
                ).then((respones)=>{
                  if(respones.data.code == 1){
                    this.is_login = true;
                    this.userName = respones.data.data.username;
                    this.userEmail = respones.data.data.email;
                    this.userAvatar = respones.data.data.avatar;
                    this.userTag = respones.data.data.tag;
                    this.userId = respones.data.data.id;
                    localStorage.setItem('login',JSON.stringify(respones.data.data))
                    Toast('登录成功！');
                    this.userfocu();
                    done();
                  }else{
                    Toast(respones.data.msg);
                    done(false);
                  }
                })
              }
            } else {
              done();
            }
          },
          userfocu:function(){
            let storage = JSON.parse(localStorage.getItem('login'));
            this.$fetch('https://www.aischolar.com/mobile/meeting/userfocus',
              {id:this.data.id,uid:storage.id}
            ).then((response) => {
                if (response.code.focus==0){
                  console.log("未关注")
                }else {
                  console.log("已关注")
                  this.sidebar_on =1
                }

            }).catch(err => {
              Toast({
                message: '获取关注状态失败，请刷新',
                duration: 3000
              });
            })
         },
          userfocus:function(){
                let storage = JSON.parse(localStorage.getItem('login'));
                if(storage==null){
                  this.show = true;
                  this.$router.push('/login');
                  return false;
                }
                this.$fetch('https://www.aischolar.com/mobile/meeting/userfocus',
                  {id:this.data.id,uid:storage.id}
                ).then((response) => {
                  if (response.code.focus==0){
                    this.sidebar_on =0
                    Toast({
                      message: response.msg,
                      duration: 3000
                    });
                  }else {
                    this.sidebar_on =1
                    Toast({
                      message: response.msg,
                      duration: 3000
                    });
                  }
                  console.log(response);


                  }).catch(err => {
                  Toast({
                    message: '关注失败！',
                    duration: 3000
                  });
                })
              },
            //新闻页跳转
            newslink:function(id){
                console.log(id)
                this.$router.push({name: 'news',query:
                        {
                            id:id
                        }
                })
            },
            //注册费跳转
            getReg:function(){
              let storage = JSON.parse(localStorage.getItem('login'));
              if(storage==null){
                this.show = true;
                this.$router.push('/login');
                return false;
              }
              this.$router.push({name: 'registerf',query:
                  {
                    mid:this.data.id
                  }
              })
            },
            //组委会跳转
            committeet:function(id){
                this.$router.push({name: 'committee',query:
                        {
                            id:id
                        }
                })
            },
            officer_li:function (index)  {
                console.log(index)
                console.log(this)
            }
        },
        watch:{


        },
        beforeUpdate:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('beforeUpdate:重新渲染之前触发')
            // console.log('然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染')
        },
        updated:function(){
            //这里不能更改数据，否则会陷入死循环
            // console.log('updated:数据已经更改完成，dom也重新render完成')
        },
        beforeDestroy:function(){
            // console.log('beforeDestory:销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等...')
            // clearInterval(this.$options.timer)
        },
        destroyed:function(){
            // console.log('destroyed:组件的数据绑定、监听...都去掉了,只剩下dom空壳，这里也可以善后')
        }
    }
</script>

<style lang="scss" scoped>
    @import '../../common/style/common.css';
    @import "../../common/style/common.scss";
    /*头部*/
    .headimg{
        width: $wid;
        height: 180*2px;
        position: relative;
        img{
            width: $wid;
            height: 180*2px;
        }
        .head_title{
            width: 88%;
            position: absolute;
            bottom: -44PX;
            left: 6%;
            .head_title_box{
                padding: 20PX 0;
                overflow: hidden;
                clear: none;
                background:#fff;
                border-radius: 4PX;
                box-shadow: 1PX 2PX 10PX gainsboro;
                /*filter: blur(1px);*/
                .head_text_top{
                    height: 30*2px;
                    line-height: 30*2px;
                    font-size: 28px;
                    font-weight: 600;
                    color: #303030;
                    text-align: center;
                    overflow: auto;
                    white-space: nowrap;
                }
                .head_text{
                    float: left;
                    width: 50%;
                    text-align: center;
                    font-size: 24px;
                    color: #303030;
                    font-weight: 600;
                    overflow: auto;
                    white-space: nowrap;
                }
            }
        }
    }
    /*center*/
    .officer-center
    {
        margin-top: 59PX;
        padding: 0 23PX;
        margin-bottom: 20PX;
        ul .officer-li{
            //width: $wid;
            padding:22px 20px 0 20px;
            clear: none;
            overflow: hidden;
            border-radius: 5PX;
            box-shadow: 1PX 2PX 10PX gainsboro;
            margin-top: 14PX;
            .dan{
                clear: none;
                overflow: hidden;
                margin-bottom: 22px;
            }
            .officer-g{
                float: left;
                width: 16*2px;
                height: 16*2px;
            }
            .officer-t{
                float: left;
                font-size: 13*2px;
                padding-top: 3*2px;
                padding-left: 18px;
            }
            .officer-r1{
                margin-top: 8px;
                display: block;
                width: 32px;
                height: 16px;
                background-image:url("../../common/image/officer/bot.png");
                background-size: 100% 100%;
                vertical-align: middle;
                background-repeat: no-repeat;
            }
            .officer-r2{
                margin-top: 8px;
                display: block;
                width: 32px;
                height: 16px;
                background-image: url("../../common/image/officer/bob.png");
                background-size: 100% 100%;
                vertical-align: middle;
                background-repeat: no-repeat;
            }
        }
        .officer_lit{
            padding: 0 20px;
            background: #f5f5f5;
        }
        .officer_lit i{
            display: block;
            width: 100%;
            height: 1px;/*no*/
            background-color: #D7D7D7;
        }

    }
    .officer_show{
        width: 100%;
        font-size: 26px;
        line-height: normal;
        word-break:break-all; //英文换行
        overflow: auto;
        padding-top: 10PX;
        /*word-wrap:break-word*/
        /*transition: height 2s;*/
        /*-webkit-transition:height 2s; !* Safari *!*/
        /*transition-timing-function: ease;*/
        /*-webkit-transition-timing-function: ease;*/
        /*height: 0;*/
        /*会议新闻*/
        .offone{
            padding-bottom: 20px;
            border-bottom: 1px solid #D7D7D7;/*no*/
            margin-bottom: 10px;
            p.offonep{
                color: #0099CC;
                margin-bottom: 10px;
            }
        }
        /*会议简介*/
        .offtwo{
            padding-bottom: 20px;
        }
        /*注册费与参与费*/
        .offthree{
            padding-bottom: 20px;
            .offthree_tab{
                width: 100%;
                background: #EEEEEE;
                text-align: center;
                border: 1px solid #F9F9F9;/*no*/
                margin-bottom: 20px;
                thead tr th{
                    padding:14px 0;
                    border: 1px solid #F9F9F9;/*no*/
                }
                thead tr th:nth-child(1){
                    width: 40%;
                }
                thead tr th:nth-child(2){
                    width: 30%;
                }
                thead tr th:nth-child(3){
                    width: 30%;
                }
                tbody tr td{
                    padding:14px 0;
                    border: 1px solid #F9F9F9;/*no*/
                }
            }
        }
        /*会议组委会*/
        .offfour{
            overflow: hidden;
            clear: none;
            padding: 20px 0;
            border-bottom: 1px dashed #D7D7D7;/*no*/
            .offfour_left{
                float: left;
                width: 120px;
                height: 120px;
                overflow: hidden;
                border-radius: 50%;
                img{
                    width: 120px;
                    height: 120px;
                    border-radius: 50%;
                    background: #fff;
                }
            }
            .offfour_right{
                width: 560px;
                padding-left: 20px;
                padding-top: 10px;
                float: left;
            }
        }
        /*会议征稿/论文评审及出版/会议地点*/
        .offfive,.offsix,.offeight,.offnine{
            width: 100%;
            overflow: hidden;
            padding-bottom: 10px;
            padding-top: 10px;
            .offeight_phone{
                margin-bottom: 20px;
                .offeightp{
                    font-size: 28px;
                    font-weight: 700;
                }
            }
            .offninea{
                float: left;
                margin-top: 20px;
                width: 200px;
                height: 240px;
                text-align: center;
                overflow: hidden;
                img{
                    width: 100%;
                    height: 200px;
                    background: #fff;
                }
                span{
                    color: #333;
                    height: 40px;
                    width: 100%;
                    line-height: 40px;
                }
            }
        }
        /*会议日程*/
        .offseven{
            padding-left: 20px;
            padding-bottom: 20px;
            /*时间轴*/
            .time-vertical {
                list-style-type: none;
                padding: 0;
            }

            .time-vertical li{
                position: relative;
                border-left: 2px solid #4C94CF;/*no*/
            }
            .time-vertical:last-child li:last-child{
                /*position: relative;*/
                border-left: 2px solid #fff;/*no*/
                /*border-left: none;*/

            }
            .time-vertical:last-child li:last-child::after{
                content: "";
                position: absolute;
                top: 0;
                left:-4px;
                width: 2px;/*no*/
                height: 50%;
                background-color: #4C94CF;
            }
            .time-vertical li .tit{
                display: inline-block;
                margin-left: 30px;
                margin-top: 15px;
                text-decoration: none;
                color: #000;
                margin-bottom: 20px;
            }
            .time-vertical li .tit1{
                font-weight: 700;
                font-size: 30px;
            }
            .time-vertical li a span{
                margin-right: 50px;
            }
            .time-vertical li .tb{
                position: absolute;
                top: 36%;
                left: -8px;/*no*/
                width: 14px;/*no*/
                height: 14px;/*no*/
                border-radius: 50%;
                background: #4C94CF;
                display: block;
            }
            .time-vertical li .tbb{
                position: absolute;
                top: 15px;
                left: -24px;
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: #4C94CF;
            }
        }
        .offten{
            width: 100%;
            overflow: hidden;
            padding-bottom: 10px;
            padding-top: 10px;
            ul{
                /*width: 100%;*/
                clear: none;
                overflow: hidden;
                margin-right: -50px;
                li{
                    width: 30%;
                    float: left;
                    height: 110px;
                    overflow: hidden;
                    margin-bottom: 20px;
                    margin-right: 16px;
                    img{
                        width: 100%;
                        float: left;
                        height: 110px;
                        background: #fff;
                    }
                }
            }
        }
        /*会议地点*/
        /*.offeight{*/
        /*width: 100%;*/
        /*overflow: hidden;*/
        /*padding-bottom: 10px;*/
        /*padding-top: 10px;*/
        /*}*/
    }

    /*效果*/
    .on .officer_show{
        height: 400px;
    }
    /*center  end*/
</style>
<style lang="scss" scoped>
  .row{
    background-color: #fff;
  }
  .sidebar{
    position: fixed;
    bottom: 80px;
    right: 10px;
    li{
      width: 80px;
      height: 80px;
      margin-bottom: 10px;
    }
    .sidebar_a{
      width: 72px;
      height: 72px;
      background-image: url("../../common/image/officer/u3007.png");
      background-size: 100% 100%;
      margin-left: 4px;
    }
    .sidebar_aon{
      width: 72px;
      height: 72px;
      background-image: url("../../common/image/officer/love.png");
      background-size: 100% 100%;
      margin-left: 4px;
    }
    .sidebar_b,.sidebar_c{
      font-size: 24px;
      color: #fff;
      text-align: center;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background-color: #557ae4;
      .sidebar_p{
        padding-top: 14px;
      }

      .sidebar_t{
        padding-top: 10px;
        i{
          margin-left: 24px;
          margin-bottom: 4px;
          display: block;
          width: 32px;
          height: 32px;
          background-image: url("../../common/image/officer/dowdload.png");
          background-size: 100% 100%;
        }
      }
    }
  }
</style>
<style>
    li img {
        height: auto;
        max-width: 100%;
        background: #fff;
    }
    p{
        letter-spacing: 1PX;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;

    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0.8;
    }
  .mint-toast{
    z-index: 9999;
  }
  #wxsys{background: none;color: #000;margin-top: 36px;}
  .van-dialog__footer{ border-top: 1px solid gainsboro;}
  .van-cell__title span{font-size: 30px;}
  .van-button,.mint-msgbox-btns button{font-size: 34px;margin: 20px;}
  .van-dialog__content{margin:30px;}
  .van-field__control{padding: 30px 0;text-align: center;font-size: 30px;border: 0.025rem solid gray;border-radius: 10px;}
  .van-dialog__header{font-size: 34px;border-bottom: 1px solid gainsboro;padding-bottom: 30px;}
  .tishi{font-size: 26px; margin: 12px 0 30px 0;color: red;text-align: left;margin-left: 50px;}
  .outstyle{margin-left: 79px!important;}
  .mint-msgbox-title,.mint-msgbox-message{font-size: 30px;padding: 30px 0;}
  .mint-msgbox-btns{height: auto;}
</style>
